<template>
<el-container class="home-container"> 
  <el-header>
    <div>校园助手</div>
    <div class="logout" @click="logout">退出登录</div>
  </el-header>
  <el-container>
    <el-aside width="200px">
        <el-menu
      :default-active="currentPath"
      class="el-menu-vertical-demo"
      @select="handleSelect"
      :router="true"
>
      <el-menu-item index="/wisdomQA">
        <i class="el-icon-magic-stick"></i>
        <span slot="title">智慧问答</span>
      </el-menu-item>
      <el-menu-item index="/notificationNews">
        <i class="el-icon-document"></i>
        <span slot="title">通知新闻</span>
      </el-menu-item>
      <el-menu-item index="/activitiesOrder">
        <i class="el-icon-bell"></i>
        <span slot="title">活动按排</span>
      </el-menu-item>
      <el-menu-item index="/lostFound">
        <i class="el-icon-coordinate"></i>
        <span slot="title">失物招领</span>
      </el-menu-item>
      <el-submenu index="5">
        <template slot="title">
        <i class="el-icon-camera"></i>
        <span slot="title">校园探索</span>
      </template>
      <el-menu-item-group>
          <el-menu-item index="/campusExploration/campusView">校园风景</el-menu-item>
          <el-menu-item index="/campusExploration/mentorDemeanor">导师风采</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
    </el-aside>
    <el-main>
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>
<script>
export default {
    data(){
        return {
            currentPath:''
        }   
    },
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push({path:'/login'})
            this.$message.success('退出成功');
        },
        handleSelect(e){
            window.sessionStorage.setItem('currentPath',e);
            this.currentPath = e;
        }
    },
    created(){
        const activePath = window.sessionStorage.getItem('currentPath');
        if(activePath){
            this.currentPath = activePath;
        }else{
            this.currentPath = '/wisdomQA';
        }
    }
}
</script>

<style lang="less" scoped>
.home-container{
    height: 100%;
    .logout{
        font-size: 12px;
        cursor: pointer;
    }
 }
.el-header {
    background-color: #1686f6;
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    color: white;
    font-size: 20px;
    align-items: center;
}

.el-aside {
    background-color: #ffffff;
}

.el-main {
    background-color: #E9EEF3;
}

 </style>